<template>
    <section class="todoapp">
        <!-- header -->
        <header class="header">
            <input v-model="texts" class="new-todo" autocomplete="off" placeholder="设置会议邀请信息（标题）">
        </header>
        <div class="tianjia">
            <el-button class="onlybutton" @click="addTodo(texts)" size="medium" type="danger">添加会议邀请信息</el-button>
        </div>

        <!-- main section -->
        <section v-show="todos.length" class="main">
            <!-- <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })"> -->
            <label for="toggle-all" />
            <ul class="todo-list">
                <todo v-for="(todo, index) in filteredTodos" :key="index" :todo="todo" @toggleTodo="toggleTodo" @editTodo="editTodo" @deleteTodo="deleteTodo" />
            </ul>
        </section>
        <!-- footer -->
        <footer v-show="todos.length" class="footer">
            <span class="todo-count">
                <strong>{{ remaining }}</strong>
                {{ remaining | pluralize('item') }} left
            </span>
            <!-- <ul class="filters">
                <li v-for="(val, key) in filters" :key="key">
                    <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
                </li>
            </ul> -->
            <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
        Clear completed
      </button> -->

        </footer>
    </section>

</template>

<script>
    import Todo from './Todo.vue';

    const STORAGE_KEY = 'todos';
    const filters = {
        all: todos => todos,
        active: todos => todos.filter(todo => !todo.done),
        completed: todos => todos.filter(todo => todo.done)
    };
    const defalutList = [
        { title: '姓名', done: true, key: '1' },
        { title: '性别', done: true, key: '2' }
    ];
    export default {
        components: { Todo },
        filters: {
            pluralize: (n, w) => (n === 1 ? w : w + 's'),
            capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
        },
        props: ['message'],
        data() {
            return {
                visibility: 'all',
                filters,
                // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
                todos: defalutList,
                texts: ''
            };
        },
        computed: {
            allChecked() {
                return this.todos.every(todo => todo.done);
            },
            filteredTodos() {
                return filters[this.visibility](this.todos);
            },
            remaining() {
                return this.todos.filter(todo => !todo.done).length;
            }
        },
        methods: {
            setLocalStorage() {
                window.localStorage.setItem(
                    STORAGE_KEY,
                    JSON.stringify(this.todos)
                );
            },
            addTodo(texts) {
                const text = texts;
                if (text.trim()) {
                    this.todos.push({
                        title: text,
                        done: true,
                        key: this.todos.length + 1
                    });
                    this.setLocalStorage();
                    console.log('子', this.todos);
                    this.$emit('showCityName', this.todos);
                } else {
                }
            },
            toggleTodo(val) {
                val.done = !val.done;
                this.setLocalStorage();
                this.$emit('showCityName', this.todos);
            },
            deleteTodo(todo) {
                this.todos.splice(this.todos.indexOf(todo), 1);
                this.setLocalStorage();
                this.$emit('showCityName', this.todos);
            },
            editTodo({ todo, value }) {
                todo.text = value;
                this.setLocalStorage();
            },
            clearCompleted() {
                this.todos = this.todos.filter(todo => !todo.done);
                this.setLocalStorage();
            },
            toggleAll({ done }) {
                this.todos.forEach(todo => {
                    todo.done = done;
                    this.setLocalStorage();
                });
            }
        }
    };
</script>

<style lang="scss">
    @import './index.scss';
    .tianjia {
        position: absolute;
        right: 0;
        top: 0;
    }
</style>
